<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax练习</title>
  </head>
  <body>
    <div id="box"></div>
    <button id="btn">发送请求</button>
    <script>
      let boxEle = document.getElementById('box')
      let btnEle = document.getElementById('btn')
      btnEle.addEventListener('click', function () {
        let btnEle = new XMLHttpRequest()
        btnEle.onreadystatechange = function () {
          if (this.readyState === 4 && this.status === 200) {
            let data = JSON.parse(this.responseText)
            console.log(this.responseText)

            let imgArr = data.message
            let str = ''
            imgArr.forEach((item) => {
              str += `<img src="${item}">`
              boxEle.innerHTML = str
            })
          }
        }
        //3. 创建http请求
        btnEle.open('get', 'https://dog.ceo/api/breeds/image/random/8', true)
        //4.发送http请求

        btnEle.send(null)
      })
    </script>
  </body>
</html>
